<template>
  <div class="right-panel">
    <icon-theme
      class="icon-hover theme"
      :title="'切换主题'"
      theme="outline"
      :strokeWidth="4"
      size="16"
      :fill="color"
      @click="handleChangeTheme"
    />
    <!-- 添加空值检查 -->
    <el-popover  placement="bottom" :width="320" trigger="hover">
      <template #reference>
        <icon-remind
          class="icon-hover refresh"
          theme="outline"
          size="16"
          :fill="color"
          :strokeWidth="3"
        />
      </template>
      <div class="message-box">
        <el-tabs v-model="activeName" stretch>
          <el-tab-pane :label="'通知 (5)'" name="first">
            <Cell :list="noticeList" />
          </el-tab-pane>
          <el-tab-pane :label="'消息 (0)'" name="second">暂无消息</el-tab-pane>
          <el-tab-pane :label="'邮件 (0)'" name="third">暂无邮件</el-tab-pane>
        </el-tabs>
      </div>
    </el-popover>

    <!-- 添加空值检查 -->
    <FullScreen :color="color" @refresh="onRefresh" />
    <!-- 添加空值检查 -->
    <icon-refresh
      :title="'刷新页面'"
      @click="handleRefresh"
      class="icon-hover refresh"
      theme="filled"
      size="16"
      :fill="color"
      :strokeWidth="4"
    />
    <Avatar :color="color" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useSettingStore } from '@/stores/setting'; // 引入 Pinia Store
import FullScreen from '@/components/FullScreen/index.vue';
import Cell from '@/components/Cell/index.vue';

// 定义 Props
defineProps({
  color: {
    type: String,
    default: '#666',
  },
});

// 初始化 Pinia Store
const settingStore = useSettingStore();


let activeName = ref('first');

// 方法定义
const onRefresh = () => {
  console.log('Full screen refresh triggered');
};

const handleRefresh = () => {
  settingStore.setRouterView(false);
  setTimeout(() => {
    settingStore.setRouterView(true);
  }, 0);
};

const handleChangeTheme = () => {
  settingStore.setSettingDrawer(true);
};
</script>

<style lang="scss" scoped>
  .right-panel {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
    height: $base-nav-bar-height;
    .msg-badge {
      :deep(.el-badge__content.is-fixed) {
        right: calc(10px + var(--el-badge-size) / 2);
      }
    }
    .refresh,
    .theme {
      padding: $base-padding-20-10;
    }
  }
  .message-box {
    padding: $base-padding-5-15;
    :deep(.el-tabs__active-bar) {
      width: $base-tab-width_active !important;
    }
  }
</style>